<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>自适应宽高</title>
		<style>
			.container{
				
			}
			
			
			
			/* 尺寸问题：屏幕宽高比不一致，限定一个宽高范围 
			min-width属性：最小宽高【√】    min-height属性：最大宽度
			max-width属性：最大宽度        max-height属性：最大高度
			*/
		   div{
			   width:80%;
			   min-width: 500px; 
			   max-width: 800px;
			   /* 页面尺寸：最小是500px，默认是80%
				定好最小跟最大宽高，PC：80%  300px
				                  移动：500~600宽度
				*/
			   height: 300px;
			   background-color: aliceblue;
		   }
		</style>
	</head>
	<body>
		
		<div>
			Lorem ipsum, dolor sit amet consectetur adipisicing elit. Libero accusantium doloremque ullam, fuga aspernatur ea quis laborum dicta. Veniam quibusdam necessitatibus assumenda eos. Aperiam, aliquam laborum necessitatibus sunt eos maxime.
		</div>
		
		<div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint atque ullam repellendus rerum, dicta eius, expedita voluptatibus pariatur voluptatum sit corrupti nulla labore. Magni eum exercitationem quia asperiores earum distinctio.</div>
	</body>
</html>